import React, { useEffect, useState } from 'react'
import { LocationFill, LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { FloatingPanel, List } from 'antd-mobile'
export default function App() {
    let navigate = useNavigate()
    let AMap = window.AMap
    let getMap = () => {
        let map = new AMap.Map('container', {
            rotateEnable: true,
            pitchEnable: true,
            zoom: 17,
            pitch: 50,
            rotation: -15,
            viewMode: '3D', //开启3D视图,默认为关闭
            zooms: [2, 20],
            center: [115.489, 38.815],
        });
        let controlBar = new AMap.ControlBar({
            position: {
                right: '10px',
                top: '10px'
            }
        });
        controlBar.addTo(map);
        var toolBar = new AMap.ToolBar({
            position: {
                right: '40px',
                top: '110px'
            }
        });
        toolBar.addTo(map);
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(135, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(-9, -3)
        });
        var startMarker = new AMap.Marker({
            position: new AMap.LngLat(115.489, 38.815),
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
        });
        map.add([startMarker]);
        //测距
        let ruler1 = new AMap.RangingTool(map);
        var startMarkerOptions = {
            icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                imageSize: new AMap.Size(19, 31),
                image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
            }),
            offset: new AMap.Pixel(-9, -31)
        };
        var endMarkerOptions = {
            icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                imageSize: new AMap.Size(19, 31),
                image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
            }),
            offset: new AMap.Pixel(-9, -31)
        };
        var midMarkerOptions = {
            icon: new AMap.Icon({
                size: new AMap.Size(19, 31),//图标大小
                imageSize: new AMap.Size(19, 31),
                image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
            }),
            offset: new AMap.Pixel(-9, -31)
        };
        var lineOptions = {
            strokeStyle: "solid",
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 2
        };
        var rulerOptions = {
            startMarkerOptions: startMarkerOptions,
            midMarkerOptions: midMarkerOptions,
            endMarkerOptions: endMarkerOptions,
            lineOptions: lineOptions
        };
        let ruler2 = new AMap.RangingTool(map, rulerOptions);

        //启用默认样式测距
        document.getElementById('default').onclick = function () {
            ruler1.turnOff();
            ruler2.turnOn();
        }

    }
    let dw = () => {
        let map = new AMap.Map('container', {
            rotateEnable: true,
            pitchEnable: true,
            zoom: 17,
            pitch: 50,
            rotation: -15,
            viewMode: '3D', //开启3D视图,默认为关闭
            zooms: [2, 20],
            center: [115.489, 38.815],
        });
        let controlBar = new AMap.ControlBar({
            position: {
                right: '10px',
                top: '10px'
            }
        });
        controlBar.addTo(map);
        var toolBar = new AMap.ToolBar({
            position: {
                right: '40px',
                top: '110px'
            }
        });
        toolBar.addTo(map);
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(135, 40),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(-9, -3)
        });
        var startMarker = new AMap.Marker({
            position: new AMap.LngLat(115.489, 38.815),
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
        });
        map.add([startMarker]);
    }
    let [flag, setFlag] = useState(true)
    const anchors = [100, window.innerHeight * 0.4, window.innerHeight * 0.8]
    const [hours, setHours] = useState(0);
    const [minutes, setMinutes] = useState(0);
    const [seconds, setSeconds] = useState(0);
    const [millisecond, setMillisecond] = useState(0);
    const [isRunning, setIsRunning] = useState(true);
    const [timeID, setTimeId] = useState(null)
    let startTimer = ()=> {
        setIsRunning(false)
        if (isRunning) {
            setTimeId(setInterval(() => {
                setMillisecond(prevMillisecond => {
                    const newMillisecond = prevMillisecond + 1
                    if (newMillisecond < 100) {
                        return newMillisecond
                    } else {
                        setSeconds(prevSeconds => prevSeconds + 1)
                        return 0
                    }
                })
                setSeconds(prevSeconds => {
                    if (prevSeconds === 59) {
                        setMinutes(prevMinutes => prevMinutes + 1);
                        return 0;
                    }
                    return prevSeconds;
                });
                setMinutes(prevMinutes => {
                    if (prevMinutes === 59) {
                        setHours(prevHours => prevHours + 1);
                        return 0;
                    }
                    return prevMinutes;
                });
                setHours(prevHours => {
                    if (prevHours >= 24) {
                        return 0;
                    }
                    return prevHours;
                });
            }, 10))
        } else {
            clearInterval(timeID)
            setIsRunning(true)
        }
    }
    let end = ()=>{
        setFlag(true)
        startTimer()
        navigate('/end')
        sessionStorage.setItem('time',hours.toString().padStart(2, '0')+':'+minutes.toString().padStart(2, '0')+':'+seconds.toString().padStart(2, '0')+'.'+millisecond.toString().padStart(2, '0'))
    }
    useEffect(() => {
        getMap()
    }, [])
    return (
        <div>
            <div style={{ height: '3vh', display: 'flex', padding: '5px', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                    <LeftOutline fontSize='1.3rem' onClick={() => {
                        navigate(-1)
                    }} />
                </div>
                <div>
                    <p>跑步设置</p>
                </div>
            </div>
            <div id="container" style={{ height: '95vh' }}>

            </div>
            <div style={{ position: 'absolute', right: '2.6rem', top: '14rem' }}>
                <button onClick={dw} style={{ backgroundColor: '#fff', borderRadius: '5px' }}><LocationFill fontSize='1.5rem' /></button>
            </div>
            <div id="info">

            </div>
            <div style={{ position: 'absolute', bottom: '10rem', right: '0' }} id='default'>
                <div>
                    <input type="button" value="开始测距" />
                </div>
            </div>
            <FloatingPanel anchors={anchors}>
                <List>
                    <div>
                        <div style={{ textAlign: 'center' }}>
                            <h1>0.00</h1>
                            <p>公里</p>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-evenly', alignItems: 'center', textAlign: 'center', margin: '50px 0' }}>
                            <div>
                                <h2>00'00</h2>
                                <p>配速</p>
                            </div>
                            <div>
                                <h2>{hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}.{millisecond.toString().padStart(2, '0')}</h2>
                                <p>用时</p>
                            </div>
                            <div>
                                <h2>--</h2>
                                <p>千卡</p>
                            </div>
                        </div>
                        <div>
                            {flag ? <div style={{ textAlign: 'center' }} onClick={() => {
                                setFlag(false);
                                startTimer()
                            }}>
                                <svg t="1724928643503" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2350" width="50" height="50"><path d="M429.504 309.952c-12.928-13.056-39.104-4.224-39.104 17.344v380.672c0 17.344 21.76 30.528 39.104 17.344l191.104-176.256a42.24 42.24 0 0 0 0-60.928l-191.104-178.176z" fill="#101317" p-id="2351"></path><path d="M1015.552 512.128a502.656 502.656 0 0 0-503.68-503.68 502.208 502.208 0 0 0-356.096 147.264 502.016 502.016 0 0 0-147.328 356.416 500.288 500.288 0 0 0 146.816 356.736 499.584 499.584 0 0 0 356.544 146.688c277.312-2.816 503.744-226.24 503.744-503.424z m-947.968 0a444.288 444.288 0 0 1 444.288-444.544c246.976 0 447.296 200.128 447.296 444.544 0 244.032-200.32 444.416-447.296 444.416a442.304 442.304 0 0 1-444.288-444.416z" fill="#101317" p-id="2352"></path></svg>
                                <p>开始</p>
                            </div> :
                                <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
                                    <div style={{ textAlign: 'center' }} onClick={() => {
                                        setFlag(true)
                                        startTimer()
                                    }}>
                                        <svg t="1724929428458" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3347" width="50" height="50"><path d="M512 62.389956c-248.312412 0-449.610044 201.297632-449.610044 449.610044s201.297632 449.610044 449.610044 449.610044 449.610044-201.297632 449.610044-449.610044S760.312412 62.389956 512 62.389956zM786.507004 786.507004c-35.672454 35.672454-77.196173 63.672158-123.416867 83.222423-47.821145 20.22667-98.655927 30.482245-151.09116 30.482245-52.435233 0-103.270015-10.255575-151.09116-30.482245-46.220694-19.549242-87.744413-47.549969-123.416867-83.222423-35.672454-35.672454-63.672158-77.196173-83.222423-123.416867-20.22667-47.821145-30.482245-98.655927-30.482245-151.090137 0-52.435233 10.255575-103.270015 30.482245-151.09116 19.549242-46.220694 47.549969-87.744413 83.222423-123.416867 35.672454-35.672454 77.196173-63.672158 123.416867-83.222423 47.821145-20.22667 98.654904-30.482245 151.09116-30.482245 52.435233 0 103.268992 10.255575 151.09116 30.482245 46.220694 19.549242 87.744413 47.549969 123.416867 83.222423 35.672454 35.672454 63.672158 77.196173 83.222423 123.416867 20.22667 47.821145 30.482245 98.655927 30.482245 151.09116 0 52.435233-10.255575 103.268992-30.482245 151.090137C850.179163 709.310831 822.179458 750.83455 786.507004 786.507004zM699.168844 285.84933 583.882144 285.84933c-3.203972 0-5.801123 2.597151-5.801123 5.801123l0 440.698071c0 3.203972 2.597151 5.801123 5.801123 5.801123l115.2867 0c3.203972 0 5.801123-2.597151 5.801123-5.801123L704.969966 291.650453C704.97099 288.446481 702.373839 285.84933 699.168844 285.84933zM440.117856 285.84933 324.830133 285.84933c-3.203972 0-5.801123 2.597151-5.801123 5.801123l0 440.698071c0 3.203972 2.597151 5.801123 5.801123 5.801123L440.117856 738.149647c3.203972 0 5.801123-2.597151 5.801123-5.801123L445.918979 291.650453C445.918979 288.446481 443.321828 285.84933 440.117856 285.84933z" fill="#272636" p-id="3348"></path></svg>
                                        <p >暂停</p>
                                    </div>
                                    <div style={{ textAlign: 'center' }} onClick={() => {
                                        end()
                                    }}>
                                        <svg t="1724929749128" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4698" width="50" height="50"><path d="M678.528 642.304c0 17.6-14.4 32-32 32h-268.992a32 32 0 0 1-32-32V381.696a32 32 0 0 1 32-32h268.992c17.6 0 32 14.4 32 32v260.608z" fill="#d81e06" p-id="4699"></path><path d="M1015.552 512.128a502.656 502.656 0 0 0-503.68-503.68 502.208 502.208 0 0 0-356.096 147.264 502.016 502.016 0 0 0-147.328 356.416 500.288 500.288 0 0 0 146.816 356.736 499.584 499.584 0 0 0 356.544 146.688c277.312-2.816 503.744-226.24 503.744-503.424z m-947.968 0a444.288 444.288 0 0 1 444.288-444.544c246.976 0 447.296 200.128 447.296 444.544 0 244.032-200.32 444.416-447.296 444.416a442.304 442.304 0 0 1-444.288-444.416z" fill="#d81e06" p-id="4700"></path></svg>
                                        <p>结束</p>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>

                </List>
            </FloatingPanel>
        </div>
    )
}

